<template>
    <div class="detail">
        <div class="detail-b">
            <Header></Header>
                <div class="detail-a">
                    <div class="title">
                    <span :class="[
                        {put_good:(post.good === true)},
                        {put_top:(post.top === true)},
                        {'topiclist-tab':(post.good !== true && post.top !== true)}
                        ]">
                        {{ post | tabFormatter}}
                    </span>
                    <span>{{post.title}}</span>
                  <ul class="na">
                    <li>
                        发布于{{post.last_reply_at | formDate}}
                    </li>
                    <li>
                        作者{{post.author.loginname}}
                    </li>
                    <li>
                        {{post.visit_count}}次浏览
                    </li>
                    <li>
                        来自{{post.tab}}
                    </li>
                  </ul>
            </div>
                <div v-html="post.content" class="topic_content markdown-body"></div>
                </div>
        </div>
    </div>
</template>
<script>
import Header from "./components/Header.vue";

export default {
  data() {
    return {
      post: []
    };
  },
  methods: {
    getArticleData() {
      this.$axios
        .get(`https://cnodejs.org/api/v1/topic/${this.$route.params.id}`)
        .then(res => {
          console.log(res);
          this.post = res.data.data;
        });
    }
  },
  created() {
    this.getArticleData();
  },
  components: {
    Header
  },
  filters: {
    tabFormatter(post) {
      if (post.good == true) {
        return "精华";
      } else if (post.top == true) {
        return "置顶";
      } else if (post.tab == "ask") {
        return "问答";
      } else if (post.tab == "share") {
        return "分享";
      } else {
        return "招聘";
      }
    },
    formDate(str) {
      if (!str) return "";
      var date = new Date(str);
      var time = new Date().getTime() - date.getTime(); //现在时间-传入时间=相差时间
      if (time < 0) {
        return "";
      } else if (time / 1000 < 30) {
        return "刚刚";
      } else if (time / 1000 < 60) {
        return parseInt(time / 1000) + "秒前";
      } else if (time / 60000 < 60) {
        return parseInt(time / 60000) + "分钟前";
      } else if (time / 3600000 < 24) {
        return parseInt(time / 3600000) + "个小时前";
      } else if (time / 86400000 < 31) {
        return parseInt(time / 84600000) + "天前";
      } else if (time / 2592000000 < 12) {
        return parseInt(time / 2592000000) + "个月前";
      } else {
        return parseInt(time / 31536000000) + "年前";
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.detail-a
    width 7.304rem
    background-color #ffffff
    margin auto
    margin-top .4rem
    border-right .3rem

.markdown-body >>> img {
    width 100%

}

.detail-b {
    width: 100%;
    background-color: #e1e1e1;
}

.put_good, .put_top {
    background: #80bd01;
    padding: 0.04rem 0.08rem;
    border-radius: 0.06rem;
    color: #fff;
    font-size: 0.24rem;
    margin-right: 0.2rem;
}

.topiclist-tab {
    background-color: #e5e5e5;
    color: #999;
    padding: 0.04rem 0.08rem;
    border-radius: 0.06rem;
    font-size: 0.24rem;
    margin-right: 0.2rem;
}

.title {
    font-size: 22px;
    font-weight: 700;
    display: inline-block;
    vertical-align: bottom;
    width: 7.304rem;
    height: 2.916rem;
    line-height: 130%;
    background-color: #ffffff;
    padding-top .8rem
    position: relative;
    
}

.na {
    list-style: none;
    padding: 0px 0px;
    margin: 6px 0px;
    position: absolute;
    bottom: 0.1rem;

    li {
        display: inline-block;
        font-size: 12px;
        color: #838383;
    }
}
</style>
